<template>
	<view class="editpwd">
		<div style="height: 60rpx;"></div>
		<up-form labelPosition="left" :model="model1" :rules="rules" ref="form1"
			style="background:#fff;padding-left: 30rpx;padding-right:20rpx">
			<up-form-item label="原密码" prop="userInfo.oldPassword" :borderBottom="true" labelWidth="160rpx">
				<up-input placeholder="请输入原密码" style="margin-left: 20rpx;" v-model="model1.userInfo.oldPassword"
					:type="isShowOldPwd ? 'text' : 'password'" border="none">
					<!-- <template #suffix>
						<up-icon name="eye" size="24" v-if="isShowOldPwd" @click="isShowOldPwd = false"></up-icon>
						<up-icon name="eye-off" size="24" v-else @click="isShowOldPwd = true"></up-icon>
					</template> -->
				</up-input>
			</up-form-item>

			<up-form-item label="新密码" prop="userInfo.newPassword" :borderBottom="true" labelWidth="160rpx">
				<up-input placeholder="请输入新密码" style="margin-left: 20rpx;" v-model="model1.userInfo.newPassword"
					:type="isShowNewPwd ? 'text' : 'password'" border="none">
					<!-- <template #suffix>
						<up-icon name="eye" size="24" v-if="isShowNewPwd" @click="isShowNewPwd = false"></up-icon>
						<up-icon name="eye-off" size="24" v-else @click="isShowNewPwd = true"></up-icon>
					</template> -->
				</up-input>
			</up-form-item>

			<up-form-item label="确认密码" prop="userInfo.confirmPassword" :borderBottom="true" labelWidth="160rpx">
				<up-input placeholder="请确认新密码" style="margin-left: 20rpx;" v-model="model1.userInfo.confirmPassword"
					:type="isShowConfirmPwd ? 'text' : 'password'" border="none">
					<!-- <template #suffix>
						<up-icon name="eye" size="24" v-if="isShowConfirmPwd"
							@click="isShowConfirmPwd = false"></up-icon>
						<up-icon name="eye-off" size="24" v-else @click="isShowConfirmPwd = true"></up-icon>
					</template> -->
				</up-input>
			</up-form-item>
		</up-form>
        <div style="color:#ff6a00;padding-left:30rpx;font-size: 28rpx;margin-top: 10rpx;">密码6-20位，需包含数字与字母</div>
		<div class="box1"><up-button text="确认修改" class="login_btn1" @tap="submitForm"></up-button></div>
	</view>
</template>

<script setup>
import { ref } from 'vue'
let model1 = ref({
	userInfo: {
		oldPassword: '',
		newPassword: '',
		confirmPassword: ''
	}
})

const isShowOldPwd = ref(false)
const isShowNewPwd = ref(false)
const isShowConfirmPwd = ref(false)

const rules = ref({
	'userInfo.oldPassword': {
		type: 'string',
		required: true,
		message: '请输入原密码',
		trigger: ['blur', 'change'],

	},
	'userInfo.newPassword': {
		type: 'string',
		required: true,
		message: '请输入新密码',
		trigger: ['blur', 'change'],
	},
	'userInfo.confirmPassword': {
		type: 'string',
		required: true,
		message: '请确认新密码',
		trigger: ['blur', 'change'],
	}
})
const form1 = ref(null)
import { editPassword } from '../../utils/user'
const submitForm = async () => {
	// 验证表单
	console.log(model1.value.userInfo)
	if (model1.value.userInfo.confirmPassword=='' || model1.value.userInfo.oldPassword=='' || model1.value.userInfo.newPassword=='') {
		uni.showToast({
			title: '请检查输入完整',
			duration: 2000,
			icon:'error'
		});
		return
	}
	if(model1.value.userInfo.confirmPassword != model1.value.userInfo.newPassword){
		uni.showToast({
			title: '两次输入密码不一致',
			duration: 2000,
			icon:'error'
		});
		return
	}
	if(model1.value.userInfo.oldPassword == model1.value.userInfo.newPassword){
		uni.showToast({
			title: '新密码不能与旧密码相同',
			duration: 2000,
			icon:'error'
		});
		return
	}
    try {
		const res = await editPassword({newPass:model1.value.userInfo.newPassword,oldPass:model1.value.userInfo.oldPassword})
		if(res.code == 200){
			uni.showToast({
				title: '修改成功',
				duration: 2000,
				icon:'success'
			});
		     uni.navigateTo({
				 url:'/pages/AccountSafe/AccountSafe'
			 })
		}
	}catch(e){
		 
	}

}






































</script>

<style lang="scss">
.editpwd {
	width: 100%;
	height: 100vh;
	background-color: rgba(247, 248, 250, 1);
	margin: 0;
	padding: 0;
}

.login_btn1 {
	width: 638rpx;
	height: 82rpx;
	line-height: 44rpx;
	border-radius: 8rpx;
	background: #FF903C;
	color: rgba(255, 255, 255, 1);
	font-size: 30rpx;
	text-align: center;
	box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(206, 206, 206, 0.37);
	font-family: -regular;
	margin-top: 104rpx;
}
</style>
